<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="ClickE" type="button" value="点击">
<input id="ConsultE" type="button" value="咨询">
<input id="MeetE" type="button" value="见面">
<input id="DealE" type="button" value="成交">
<div id="main" style="width: 800px;height:500px;"></div>
<script src="https://cdn.bootcss.com/echarts/3.6.1/echarts.min.js"></script>
<script>
    var tempClickCount = 0;
    var tempConsultCount = 0;
    var tempMeetCount = 0;
    var tempDealCount = 0;
    var clickCount = [];
    var consultCount = [];
    var meetCount = [];
    var dealCount = [];
    var xAxisData = [];
    for(var i = 0;i<10;i++){
         clickCount.push(0);
         consultCount.push(0);
         meetCount.push(0);
         dealCount.push(0);
    }
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title : {
            text: '数据',
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['点击率', '咨询率', '见面率','成交率']
        },
//        toolbox: {
//            show : true,
//            feature : {
//                mark : {show: true},
//                dataView : {show: true, readOnly: false},
//                magicType : {show: true, type: ['line', 'bar']},
//                restore : {show: true},
//                saveAsImage : {show: true}
//            }
//        },
        dataZoom : {
            show : false,
            start : 0,
            end : 100
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                data : (function (){
                    var now = new Date();
                    var len = 10;
                    while (len--) {
                        xAxisData.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                        now = new Date(now - 1000);
                    }
                    return xAxisData;
                })()
            },
            {
                type : 'category',
                boundaryGap : true,
                data : (function (){
                    var res = [];
                    var len = 10;
                    while (len--) {
                        res.push(len + 1);
                    }
                    return res;
                })()
            }
        ],
        yAxis:{},
//        yAxis : [
//            {
//                type : 'value',
//                scale: true,
//                name : '价格',
////                boundaryGap: [0.2, 0.2]
//            },
//            {
//                type : 'value',
//                scale: true,
//                name : '预购量',
////                boundaryGap: [0.2, 0.2]
//            }
//        ],
        series : [
            {
                name:'点击率',
                type:'line',
//                xAxisIndex: 1,
//                yAxisIndex: 1,
                data:clickCount
            },
            {
                name:'咨询率',
                type:'line',
                data:consultCount
            },
            {
                name:'见面率',
                type:'line',
                data:meetCount
            },
            {
                name:'成交率',
                type:'line',
                data:dealCount
            }
        ]
    };
    myChart.setOption(option,true);


//    option2 = {
//        title : {
//            text: '总计',
//            x:'center'
//        },
//        tooltip : {
//            trigger: 'item',
//            formatter: "{a} <br/>{b} : {c} ({d}%)"
//        },
//        legend: {
//            orient : 'vertical',
//            x : 'left',
//            data:['点击率', '咨询率', '见面率','成交率']
//        },
//        calculable : false,
//        series : [
//            {
//                name:'详情',
//                type:'pie',
//                radius : '55%',
//                center: ['50%', '60%'],
//                data:[
//                    {value:clickCount[9], name:'点击率'},
//                    {value:clickCount[9], name:'咨询率'},
//                    {value:clickCount[9], name:'见面率'},
//                    {value:clickCount[9], name:'成交率'},
//                ]
//            }
//        ]
//    };
//    myChart2.setOption(option2,true)

    var timeTicket = setInterval(function (){
        clickCount.shift();
        consultCount.shift();
        meetCount.shift();
        dealCount.shift();
        xAxisData.shift();
        clickCount.push(tempClickCount);
        consultCount.push(tempConsultCount);
        meetCount.push(tempMeetCount);
        dealCount.push(tempDealCount);
        xAxisData.push(new Date().toLocaleTimeString().replace(/^\D*/,''));
        myChart.setOption({
            xAxis:{
                type : 'category',
                boundaryGap : true,
                data :xAxisData
            },
            series: [
                {
                    name:'点击率',
                    type:'line',
                    data:clickCount
                },
                {
                    name:'咨询率',
                    type:'line',
                    data:consultCount
                },
                {
                    name:'见面率',
                    type:'line',
                    data:meetCount
                },
                {
                    name:'成交率',
                    type:'line',
                    data:dealCount
                }
            ]
        });
    },1000);
    document.getElementById("ClickE").addEventListener("click", function(){
        tempClickCount++;
    });
    document.getElementById("ConsultE").addEventListener("click", function(){
        tempConsultCount++;
    });
    document.getElementById("MeetE").addEventListener("click", function(){
        tempMeetCount++;
    });
    document.getElementById("DealE").addEventListener("click", function(){
        tempDealCount++;
    });
</script>
</body>
</html>